/**
 * Created by Ford Zhang on 2016/12/28.
 */
// window.onload = prepareGallery;	//这一行指定在浏览器加载网页后执行，当window对象触发onload事件时,document对象已经存在，这样为了确保脚本正常工作，在文档加载完之前有可能无法访问其中的对象
addLoadEvent(prepareGallery);	//定义图片点击后的响应方式，让图片在指定的节点中显示
addLoadEvent(preparePlaceholder);	//添加描述内容。    

function preparePlaceholder() {
	//创建一个图片节点
	var placeholder = document.createElement('img');
	placeholder.setAttribute('id', 'placeholder');
	placeholder.setAttribute('src', 'images/placeholder.gif');
	placeholder.setAttribute('alt', 'my image gallery');
	//创建一个用于说明的P节点
	var description = document.createElement('p');
	description.setAttribute('id', 'description');
	var descriptionText = document.createTextNode('请选择图片');
	description.appendChild(descriptionText);

	//以上所需节点创建完毕，现在将节点插入文档
	var gallery = document.getElementById('image_gallery');
	insertAfter(placeholder, gallery);
	insertAfter(description, placeholder);
	//也可以使用下面这两条指定取代它们，因为nextSibling指向的就是节点的下一个节点
	gallery.parentNode.insertBefore(description, gallery.nextSibling);
	gallery.parentNode.insertBefore(placeholder, description);
}
function prepareGallery() {
	//检查浏览器是否支持JavaScript的方法
	if (!document.getElementsByTagName) {
		return false;
	}
	if (!document.getElementById) {
		return false;
	}

	//检查节点是否存在
	if (!document.getElementById('image_gallery')) {
		return false;
	}

	var gallery = document.getElementById('image_gallery');
	var links = gallery.getElementsByTagName('a');

	for (var i = 0; i < links.length; i++) {
		links[i].onclick = function () {
			return !showPicture(this);
		}

	}

}

function showPicture(whichPic) {
	//取得图片节点链接
	var source = whichPic.getAttribute('href');
	if (document.getElementById('placeholder')) {
		//取得待显示图片的占位符节点
		var placeholder = document.getElementById('placeholder');
		//修改占位符节点的图片链接
		placeholder.setAttribute('src', source);        //也可以不声明placeholder变量，直接用以下的非DOM方式直接引用元素来修改值，这样浏览器兼容性好点，但是使用DOM的好处是可以用于多种语言环境。	placeholder.src = source;

	} else {
		return false;
	}
	if (document.getElementById('description')) {
		if(whichPic.getAttribute('title')) {
			var text = whichPic.getAttribute('title');
		} else {
			var text = '无说明';
		}
		var description = document.getElementById('description');
		description.firstChild.nodeValue = text;
	}

	return true;
}
/**
 * 这个函数可以在文档加载完后直接添加执行函数变得简单，避免冲突
 * 只需使用addLoadEvent(函数名)即可，注意：函数名不要加引号。
 * @param func
 */
function addLoadEvent(func) {
	var oldOnload = window.onload;

	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function () {
			oldOnload();
			func();
		}
	}
}
/**
 * 在目标节点之后插入节点，因为DOM只提供了insertBefore，此函数也是利用insertBefore结合nextSibling属性来实现
 * 方便使用。
 * @param newElement
 * @param targetElement
 */
function insertAfter(newElement, targetElement) {
	var parent = targetElement.parentNode;
	if(parent.lastChild == targetElement) {
		parent.appendChild(newElement);
	} else {
		//nextSibling表示节点的下一个节点
		parent.insertBefore(newElement, targetElement.nextSibling);
	}
}